<template>
  <div class="table">
    <div class="handle-box">
      <div class="handle-filter clearfix">
        <div class="fl">
          <div class="filter-item">
            <form class="filter-search" action>
              <input type="text" placeholder="请输入商品名称查询" maxlength="15">
              <button>
                <i class="el-icon-search"></i>
              </button>
            </form>
          </div>
        </div>
        <div class="fr">
          <div class="filter-item filter-item-last">
            <el-date-picker
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </div>
        </div>
      </div>
    </div>

    <el-table
      :data="tableData"
      border
      class="table"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="number" label="券号"></el-table-column>
      <el-table-column prop="content" label="券内容" width="120"></el-table-column>
      <el-table-column prop="money" label="实收金额"></el-table-column>
      <el-table-column label="商品状态" width="90">
        <template slot-scope="scope">
          <div v-if="scope.row.status==1" class="status-radius green">出售中</div>
          <div v-if="scope.row.status==2" class="status-radius yellow">审核中</div>
          <div v-if="scope.row.status==3" class="status-radius red">已驳回</div>
          <div v-if="scope.row.status==4" class="status-radius gray">已撤回</div>
          <div v-if="scope.row.status==5" class="status-radius gray">已下架</div>
        </template>
      </el-table-column>
      <el-table-column prop="creatTime" label="核销时间" width="160"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="seeForm(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗  核销详情 -->
    <el-dialog title="收货地址" :visible.sync="dialogDetails" width="600px">
      <div class="dialog-box">
        <el-form label-width="130px" label-position="right">
          <el-form-item label="活动名称：">
            <span>212131231</span>
          </el-form-item>
          <el-form-item label="券内容：">
            <span>鱼香肉丝</span>
          </el-form-item>
          <el-form-item label="用户手机号：">
            <span>182****1231</span>
          </el-form-item>
          <el-form-item label="核销状态：">
            <span>已核销</span>
          </el-form-item>
          <el-form-item label="核销时间：">
            <span>2019-05-02 11:42:10</span>
          </el-form-item>
          <el-form-item label="核销员：">
            <span>186****1251</span>
          </el-form-item>
          <el-form-item label="商家服务费：">
            <span>-¥0.5</span>
          </el-form-item>
          <el-form-item label="商家提现金额：">
            <span>¥10.5</span>
          </el-form-item>
          <el-form-item label="支付方式：">
            <span>微信支付</span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetails = false">取 消</el-button>
        <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          number: "2131231221",
          content: "鱼香肉丝",
          money: "¥10.5",
          status: "1",
          creatTime: "2019-05-01 11:42:10"
        }
      ],
      dialogDetails: false
    };
  },
  methods: {
    //查看详情
    seeForm() {
      this.dialogDetails = true;
    }
  }
};
</script>

<style scoped>
.dialog-box{
  width: 300px;
  margin: 0 auto;
}
</style>

